
function tableDrageThComponents (columns) {
  const tableComponents = { header: { cell: null } }
  const resizeableTitle = (h, props, children) => {
    const { key, ...restProps } = props
    const col = columns.find((col) => {
      // const k = col.dataIndex || col.key
      return col.dataIndex === key || col.key === key
    })
    if (!col || !col.width) {
      return <th {...restProps}>{children}</th>
    }
    const onDrag = (x) => {
      col.width = Math.max(x, 80)
    }
    return (
      <th
        {...restProps}
        width={col.width}
        class="resize-table-th"
      >
        {children}
        <vue-draggable-resizable
          key={col.key}
          class="table-draggable-handle"
          w={20}
          x={col.width}
          z={1}
          axis="x"
          draggable={true}
          resizable={false}
          onDragging={onDrag}
        ></vue-draggable-resizable>
      </th>
    )
  }
  tableComponents.header.cell = resizeableTitle
  return tableComponents
}
export default tableDrageThComponents
